﻿@{
    Layout = null;
}



<style>
   

    p {
        margin: 0 auto 10px;
    }

    .phone {
        position: absolute;
        width: 100%;
        height: 100%;
        background: url("/Content/webImgs/Market/redPacket/redPacket-03.jpg");
        background-size: 100% 100%;
        padding: 0 5%;
    }

        .phone > p:nth-child(1) {
            font-size: 23px;
            color: whitesmoke;
            margin-top: 20px;
        }

        .phone > p:nth-child(2) {
            color: whitesmoke;
        }

        .phone .phone-num {
            display: flex;
            align-items: center;
            background-color: white;
            border-radius: 3px;
            margin-bottom: 10px;
            height: 40px;
        }

            .phone .phone-num > span {
                padding: 5px;
            }

            .phone .phone-num > input {
                flex: 1;
                border: none;
                height: 100%;
                border-radius: 3px;
            }

        .phone .sure {
            display: block;
            text-decoration: none;
            background-color: #FFCC00;
            text-align: center;
            height: 40px;
            color: #763401;
            line-height: 40px;
            font-size: 25px;
            border-radius: 5px;
            margin: 20px auto;
        }

        .phone .user-info {
            border: 1px solid white;
            border-radius: 10px;
            width: 100%;
            height: 180px;
            overflow: hidden;
        }

            .phone .user-info > ul {
                margin: 0;
                padding: 0;
                position:relative;
            }

                .phone .user-info > ul > li {
                    display: flex;
                    margin: 13px auto 20px;
                    align-items: center;
                }

                    .phone .user-info > ul > li > img {
                        width: 35px;
                        height: 35px;
                        border-radius: 40px;
                        margin-left: 10px;
                    }

                    .phone .user-info > ul > li > span {
                        color: white;
                    }
</style>
<div class="phone">
    <p>验证手机号：</p>
    <p>为您的红包准确到账，请验证手机号码。</p>
    <div class="phone-num">
        <span>+86</span>
        <input type="text" placeholder="请填写手机号码" autofocus>
    </div>
    <div class="phone-num">
        <input type="text" placeholder="请输入短信验证码" autofocus>
        <input type="button" autofocus style="color: #826A50" value="获取验证码">
    </div>
    <a class=" sure" href="javascript: $('#phone .modal-body .phone-show > #show-con').load('/Market/WebTemplate1_3')">
        确定
    </a>
    <div class="user-info" id="box">
        <ul id="cont1">
        </ul>
     



    </div>

</div>
<script>
   
    $(function () {
        getInfo();
        var num = /^1[1-9]\d{9}$/;
        $('.phone .phone-num').eq(1).children('input:nth-child(2)').click(function () {
            var that = this;
            var str = $(this).parent().prev().children('input').val();
            if (!num.test(str)) {
                $.L.msgError('请输入正确的手机号码');
            }
            else {
                var Num = 30;
                $(this).attr('disabled', 'disabled');
                function time() {
                    Num--;
                    if (Num > 0) {
                        $(that).val(Num + '秒后重发');
                        var t = setTimeout(function () {
                            time();
                        }, 1000);
                    }
                    else {
                        clearTimeout(t);
                        $(that).val('获取验证码');
                        $(that).removeAttr('disabled');

                    }
                }
                time();
            }

        });
       
      
     
     
     
    });


    var LiHeight = $("#box li").height()

    function scroll() {
        $("#box ul").animate({ "margin-top": -LiHeight }, function () {
            $("#box  ul li:nth-child(1)").appendTo($("#box  ul"));
            $("#box  ul").css({ "margin-top": 0 });
        })
    }
    var tt = setInterval(scroll, 1500);
    $( "#cont1")
     .on("mouseenter", function () {
            $("#box ul").stop()
            clearInterval(tt);
            //console.log(1)
        })
      .on("mouseleave", function () {

            tt = setInterval(scroll, 1500);
            //console.log(2)

      })
    function getInfo(pageIndex) {
        $.ajax({
            type: "get",
            url: '/Market/GetTheWinningList',
            data: {
                pageIndex: pageIndex,
                pageSize: 10
            },
            success: function (data) {
                $(data.PageData).each(function (i, ele) {
                    var e = '<li><img src=' + ele.HeadImgUrl + ' alt="null"><span style="margin-left: 10px">' + ele.Nickname + ' </span><span style="flex: 1;text-align:right;margin-right:20px">' + ele.Denomination + '</span><span style="margin-right: 10px">' + ele.Name + ' </span></li>';
                    $('.user-info > ul').append(e);
                })

            },
            error: function () { }
        });
    }

</script>





